<template>
    <div style="display:flex;justify-content: center;width:100%;">
        <!-- <div>isLogin: {{this.$store.state.isLogin}}</div> -->
        <a-card title="登陆" style="margin-top:20px;height:300px;width:400px;">
            <a-form :form="form" @submit="handleSubmit" class="login-form" id="components-form-demo-normal-login">
                <a-form-item>
                    <a-input placeholder="Username" v-decorator="[
                      'userName',
                      { rules: [{ required: true, message: 'Please input your username!' }] }
                    ]">
                        <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="user" />
                    </a-input>
                </a-form-item>
                <a-form-item>
                    <a-input placeholder="Password" type="password" v-decorator="[
                      'password',
                      { rules: [{ required: true, message: 'Please input your Password!' }] }
                    ]">
                        <a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="lock" />
                    </a-input>
                </a-form-item>
                <a-form-item>
                    <a-button class="login-form-button" html-type="submit" type="primary">
                        Log in
                    </a-button>
                </a-form-item>
            </a-form>
        </a-card>
    </div>
</template>

<script>
    export default {
        beforeCreate() {
            this.form = this.$form.createForm(this);
        },
        methods: {
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        console.log('Received values of form: ', values);
                        if ((values.userName === "admin") && (values.password === "123456")) {
                            this.$store.dispatch("setLoginState", true);
                            this.$router.push({
                                path: "/"
                            });
                        } else {
                            this.$message.error('账号或密码错误!');
                        }
                    }
                });
            },
        },
    };
</script>
<style>
    #components-form-demo-normal-login .login-form {
        max-width: 300px;
    }
    #components-form-demo-normal-login .login-form-forgot {
        float: right;
    }
    #components-form-demo-normal-login .login-form-button {
        width: 100%;
    }
</style>